<template>
  <view class="padding-lr">
    <Title icon="title-icon1" title="选择服务门店"></Title>
  </view>
  <view class="step-type">
    <Cell dot title="服务类型">
      <CheckBox :list="[{ value: 'maintenance', label: '保养' }, { value: 'other', label: '维修' }]"
        v-model:value="useDefVal.appointType"></CheckBox>
    </Cell>
    <Cell dot rightArrow title="选择车辆" @click="chooseCar = true">
      <text v-if="useDefVal.carFrameNumber">{{ useDefVal.carFrameNumber }}</text>
      <text v-else style="color: #999999;">请选择您的车架号</text>
    </Cell>
    <Cell dot rightArrow title="选择门店" @click="toChooseNearbyShop">
      <image v-if="useDefVal.shopId" class="icon-wh" :src="getImageSrc('static/icons/icon-address.png')"></image>
      <text v-if="useDefVal.shopId">{{ shopInfo.name }}</text>
      <text v-if="!useDefVal.shopId" style="color: #999999;">请选择门店</text>
    </Cell>
    <Cell dot rightArrow title="预约到店时间" @click="chooseDay = true">
      <image class="icon-wh" :src="getImageSrc('static/icons/icon-rili.png')"></image>
      <text>{{ useDefVal.appointTime }}</text>
    </Cell>
  </view>
  <ChooseCar v-model:show="chooseCar" title="选择车辆" v-model:current="carInfo"></ChooseCar>
  <ChooseRili v-model:show="chooseDay" title="预约到店时间" v-model:current="useDefVal.appointTime"></ChooseRili>
</template>

<script setup>
import { ref, watch } from "vue"
import Title from "@/components/ui/title"
import Cell from "@/components/ui/cell"
import ChooseRili from "@/components/tool/choose-rili"
import CheckBox from "@/components/ui/check-box"
import ChooseCar from "../choose-car";
import { useValue } from "@/path/hooks/v-model"
import { router } from "@/path/router";
import { getImageSrc } from '@/path/until';
const chooseCar = ref(false)
const chooseDay = ref(false)

const emit = defineEmits(['update:value', 'update:shopinfo', 'update:carinfo'])
const props = defineProps({
  value: Object,
  shopinfo: Object,
  carinfo: Object,
})
const { useDefVal } = useValue(props, emit)
const { useDefVal: shopInfo } = useValue(props, emit, "shopinfo")
const { useDefVal: carInfo } = useValue(props, emit, "carinfo")

watch(() => carInfo.value, v => {
  useDefVal.value.carFrameNumber = v?.car_frame_number
}, { immediate: true, deep: true });
function toChooseNearbyShop() {
  router.navigate({ url: "/pages/shop/nearby-shop/index" }, {
    data: {
      shopId: shopInfo.value.id,
      shopType: 2
    }
  }).then((shop) => {
    useDefVal.value.shopId = shop.id
    shopInfo.value = shop
  })
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
